<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>模板语法之插值语法{{}}</title>
    <!-- 安装vue：当你使用script进行vue安装之后，上下文就注册了一个全局变量 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <!-- 
        主要研究：{{这里可以写什么}}
        1.在data中声明的变量、函数等都可以
        2.常量     
        3.合法的js表达式
        4.模板表达式都被放到沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 等 （官网查找具体的）
    -->

    <div id="app">
        <!-- 可以看作使用msg变量 -->
        <h1>{{msg}}</h1>
        <h1>{{sayHello()}}</h1>
        <!-- <h1>{{i}}</h1> //这个没有在data中声明，无效 -->

        <!-- 常量 -->
        <h1>{{100}}</h1>
        <h1>{{'你好啊！'}}</h1>
        <h1>{{3.1415926}}</h1>

        <!-- js表达式 -->
        <h1>{{1+1}}</h1>
        <h1>{{'hello'+'vue'}}</h1>
        <h1>{{msg+'1'}}</h1>
        <h1>{{gender? '男':'女'}}</h1>
        <h1>{{msg.split('').reverse().join('')}}</h1> 

        <!-- 错误的：不是表达式，这是语句 -->
        <!-- <h1>{{var i = 100}}</h1> -->

        <!-- 在白名单里面的 -->
        <h1>{{Date}}</h1>
        <h1>{{Math}}</h1>

        <h1>{{Date.now()}}</h1>
        <h1>{{Math.ceil(3.14)}}</h1>
    </div>

    <script>
        var i = 100

        new Vue({
            el: '#app',
            data: {
                msg: '李白',  //可以看作声明变量
                sayHello: function () {
                    console.log('hello vue')
                },
                gender: true
            }
        })
    </script>
</body>

</html>